<template>
    <el-dialog :visible.sync="value" center :show-close="false">
        <template slot="title">
            <el-tooltip effect="dark" content="刷新列表" placement="bottom">
                <el-button type="info" circle @click="getStudentScoreListByExam(parentData)" icon="el-icon-refresh"></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="停止考试" placement="bottom">
                <el-button type="danger" circle v-loading.fullscreen.lock="fullscreenLoading" @click="stopExam" icon="el-icon-thumb"></el-button>
            </el-tooltip>
        </template>

        <el-table :data="studentScoreList" v-loading="loading" size="mini" border stripe :header-cell-style="{background:'#C0C4CC',color:'white',fontSize:'15px'}">
            <el-table-column type="index" label="序号" align="center"></el-table-column>
            <el-table-column prop="studentName" label="学生姓名" align="center"></el-table-column>
            <el-table-column label="单选题" align="center">
                <el-table-column prop="singleErr" label="错题数量" align="center"></el-table-column>
                <el-table-column prop="singleSucc" label="对题数量" align="center"></el-table-column>
            </el-table-column>
            <el-table-column label="多选题" align="center">
                <el-table-column prop="selectionErr" label="错题数量" align="center"></el-table-column>
                <el-table-column prop="selectionSucc" label="对题数量" align="center"></el-table-column>
            </el-table-column>
            <el-table-column prop="status" label="交卷与否" align="center">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.status == '0' ? 'info' :( scope.row.status == '1' ? 'danger' : 'success' )">
                        {{scope.row.status == '0' ? '未答题' : ( scope.row.status == '1' ? '进行中' : '已交卷')}}
                    </el-tag>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
</template>

<script>

    import { getStudentScoreListByExam,stopExam } from '@/api/academic/exam'

    export default {
        name: "student-exam-monitor",
        data(){
            return {
                value: false,
                loading:true,
                fullscreenLoading:false,
                parentData: {},
                studentScoreList:[]
            }
        },
        watch:{
            value(data){
                if(data){
                    this.getStudentScoreListByExam(this.parentData);
                }
            }
        },
        methods:{
            getStudentScoreListByExam(params){
                getStudentScoreListByExam(params).then(res=>{
                    if(res.data.success){
                        this.studentScoreList = res.data.data;
                        this.loading = false;
                    }
                });
            },
            stopExam(){
                this.$confirm("确定要结束考试吗","友情提示",{type:'warning'}).then(()=>{
                    this.fullscreenLoading = true;
                    stopExam(this.parentData).then(res=>{
                        this.$message({
                            type: res.data.success ? 'success' : 'error',
                            message: res.data.message
                        });
                        this.value = false;
                        this.fullscreenLoading = false;
                        this.$parent.getExamList(this.$parent.params);
                    });
                });

            }
        }
    }
</script>

<style scoped>

</style>